<template>
  <div class="dashboard-container">
    <!-- 页面标题 -->
    <h2 class="page-title">数据可视化看板</h2>

    <!-- 图表容器：一行放2个图表，响应式布局 -->
    <div class="chart-row">
      <!-- 1. 饼图：词条状态分布 -->
      <div class="chart-card">
        <div class="chart-header">词条状态分布</div>
        <div ref="pieChartRef" class="chart-content"></div>
      </div>

      <!-- 2. 柱状图：近7天用户注册量 -->
      <div class="chart-card">
        <div class="chart-header">近7天用户注册量</div>
        <div ref="barChartRef" class="chart-content"></div>
      </div>
    </div>

    <!-- 3. 折线图：近12个月订单金额趋势 -->
    <div class="chart-row single-chart">
      <div class="chart-card">
        <div class="chart-header">近12个月订单金额趋势（单位：万元，一个积分一万元）</div>
        <div ref="lineChartRef" class="chart-content"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts/core'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import axios from "@/utils/axios.js"

onMounted(() => {
  init()
})

const init=()=>{
  axios.get(`api/users/getMessage`)
  .then(res=>{
  //   把几个数组实际值替换掉
  })
}


// 注册 ECharts 所需组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PieChart,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
])

// 图表DOM引用
const pieChartRef = ref(null)
const barChartRef = ref(null)
const lineChartRef = ref(null)

// 图表实例
let pieChart = null
let barChart = null
let lineChart = null

// 响应式数据
const chartData = {
  // 饼图数据
  pieData: [
    { name: '正常帖子', value: 1856, color: '#409EFF' },
    { name: '已封禁帖子', value: 248, color: '#F56C6C' },
    { name: '待审核帖子', value: 92, color: '#E6A23C' }
  ],
  // 柱状图数据
  barData: {
    xAxis: ['9-18', '9-19', '9-20', '9-21', '9-22', '9-23', '9-24'],
    series: [128, 156, 98, 210, 185, 232, 205]
  },
  // 折线图数据
  lineData: {
    xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    series: [120, 95, 150, 180, 210, 250, 230, 280, 320, 350, 380, 420]
  }
}

// 页面加载完成后初始化所有图表
onMounted(() => {
  initPieChart()
  initBarChart()
  initLineChart()
})

// 窗口大小改变时重绘图表
const handleResize = () => {
  pieChart && pieChart.resize()
  barChart && barChart.resize()
  lineChart && lineChart.resize()
}

// 监听窗口大小变化
onMounted(() => {
  window.addEventListener('resize', handleResize)
})

// 组件卸载前移除监听器
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  pieChart && pieChart.dispose()
  barChart && barChart.dispose()
  lineChart && lineChart.dispose()
})

// -------------------------- 饼图：词条状态分布 --------------------------
const initPieChart = () => {
  if (!pieChartRef.value) return

  pieChart = echarts.init(pieChartRef.value)

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 个 ({d}%)'
    },
    legend: {
      top: '5%',
      right: '10%',
      orient: 'vertical',
      data: chartData.pieData.map(item => item.name)
    },
    series: [
      {
        name: '词条数量',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: chartData.pieData,
        color: chartData.pieData.map(item => item.color)
      }
    ]
  }

  pieChart.setOption(option)
}

// -------------------------- 柱状图：近7天用户注册量 --------------------------
const initBarChart = () => {
  if (!barChartRef.value) return

  barChart = echarts.init(barChartRef.value)

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: chartData.barData.xAxis,
        axisLabel: {
          color: '#666'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '注册量',
        nameTextStyle: {
          color: '#666'
        },
        axisLabel: {
          formatter: '{value} 人',
          color: '#666'
        }
      }
    ],
    series: [
      {
        name: '新用户注册',
        type: 'bar',
        barWidth: '60%',
        data: chartData.barData.series,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#409EFF' },
            { offset: 1, color: '#67C23A' }
          ])
        }
      }
    ]
  }

  barChart.setOption(option)
}

// -------------------------- 折线图：近12个月订单金额趋势 --------------------------
const initLineChart = () => {
  if (!lineChartRef.value) return

  lineChart = echarts.init(lineChartRef.value)

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c} 万元'
    },
    legend: {
      data: ['订单金额'],
      top: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartData.lineData.xAxis,
      axisLabel: {
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      name: '金额（万元）',
      nameTextStyle: {
        color: '#666'
      },
      axisLabel: {
        color: '#666'
      }
    },
    series: [
      {
        name: '订单金额',
        type: 'line',
        stack: 'Total',
        data: chartData.lineData.series,
        lineStyle: {
          width: 3,
          color: '#F56C6C'
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#F56C6C'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
            { offset: 1, color: 'rgba(245, 108, 108, 0)' }
          ])
        }
      }
    ]
  }

  lineChart.setOption(option)
}
</script>

<style scoped>
/* 页面容器样式 */
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 64px);
}

/* 页面标题 */
.page-title {
  color: #333;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 24px;
}

/* 图表行布局 */
.chart-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* 单个图表占满一行（针对折线图） */
.single-chart .chart-card {
  width: 100% !important;
}

/* 图表卡片样式 */
.chart-card {
  flex: 1;
  min-width: 400px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
}

/* 图表标题栏 */
.chart-header {
  padding: 16px 20px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #f2f2f2;
  font-weight: 500;
  background-color: #f9fafc;
}

/* 图表内容区 */
.chart-content {
  width: 100%;
  height: 400px;
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .chart-row {
    flex-direction: column;
  }

  .chart-card {
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }

  .chart-content {
    height: 300px;
    padding: 10px;
  }
}
</style>